import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
  install(app){
    // 自定义指令
    app.directive('img-lazy',{
      mounted(el,binding){
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], ) => {
            if(isIntersecting){
              el.src = binding.value
              // 首次赋值后调用stop停止监听
              stop()
            }
          },
        )
      }
    })
  }
}